<template>
  <div class="build-page">
    <el-card class="build-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>新建构建任务</span>
          <el-tag type="info">{{ currentStep }}/4</el-tag>
        </div>
      </template>

      <!-- 步骤进度条 -->
      <el-steps :active="activeStep" align-center class="steps">
        <el-step title="仓库信息" icon="Link"></el-step>
        <el-step title="环境配置" icon="Setting"></el-step>
        <el-step title="构建设置" icon="Tools"></el-step>
        <el-step title="开始构建" icon="Upload"></el-step>
      </el-steps>

      <!-- 步骤内容 -->
      <div class="step-content">
        <!-- 步骤1: 仓库信息 -->
        <div v-show="activeStep === 0" class="step-panel">
          <el-form :model="repoForm" label-width="120px">
            <el-form-item label="Git仓库地址" required>
              <el-input
                v-model="repoForm.url"
                placeholder="https://github.com/username/repository.git"
                @blur="validateRepo"
                :loading="validatingRepo"
              >
                <template #prepend>
                  <el-icon><Link /></el-icon>
                </template>
                <template #suffix v-if="validatingRepo">
                  <el-icon class="is-loading"><Loading /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="分支/标签选择">
              <el-select
                v-model="repoForm.ref"
                placeholder="选择分支或标签"
                filterable
                @focus="loadBranchesAndTags"
                @change="onRefChange"
              >
                <el-option-group label="分支">
                  <el-option
                    v-for="branch in branches"
                    :key="'branch-' + branch.name"
                    :label="branch.name"
                    :value="'branch:' + branch.name"
                  >
                    <span>{{ branch.name }}</span>
                    <el-tag size="small" style="margin-left: 8px">分支</el-tag>
                  </el-option>
                </el-option-group>
                <el-option-group label="标签">
                  <el-option
                    v-for="tag in tags"
                    :key="'tag-' + tag.name"
                    :label="tag.name"
                    :value="'tag:' + tag.name"
                  >
                    <span>{{ tag.name }}</span>
                    <el-tag size="small" type="success" style="margin-left: 8px">标签</el-tag>
                  </el-option>
                </el-option-group>
              </el-select>
              <div v-if="branches.length > 0 || tags.length > 0" class="branch-info">
                找到 {{ branchTotal }} 个分支, {{ tagTotal }} 个标签
              </div>
            </el-form-item>
          </el-form>

          <!-- 仓库信息预览 -->
          <div v-if="projectInfo" class="repo-info">
            <el-alert title="仓库验证成功" type="success" :closable="false">
              <div class="info-content">
                <p><strong>项目名称:</strong> {{ projectInfo.name }}</p>
                <p><strong>版本:</strong> {{ projectInfo.version }}</p>
                <p><strong>框架:</strong> {{ projectInfo.framework }}</p>
                <p v-if="projectInfo.buildScript">
                  <strong>构建脚本:</strong> {{ projectInfo.buildScript }}
                </p>
              </div>
            </el-alert>
          </div>
        </div>

        <!-- 步骤2: 环境配置 -->
        <div v-show="activeStep === 1" class="step-panel">
          <div class="env-section">
            <div class="section-header">
              <h3>环境域名配置</h3>
              <el-tag type="info">{{ environmentConfig.environment || "test01" }}</el-tag>
            </div>

            <el-form :model="environmentConfig" label-width="120px">
              <el-form-item label="环境类型">
                <el-radio-group v-model="environmentConfig.type" @change="onEnvironmentTypeChange">
                  <el-radio label="test">测试环境</el-radio>
                  <el-radio label="dev">开发环境</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="环境选择">
                <el-select
                  v-model="environmentConfig.environment"
                  placeholder="选择环境"
                  @focus="loadEnvironments"
                  :loading="loadingEnvironments"
                  filterable
                  style="width: 100%"
                >
                  <el-option
                    v-for="env in currentEnvironments"
                    :key="env.key"
                    :label="`${env.name} (${env.url})`"
                    :value="env.key"
                  >
                    <div style="display: flex; justify-content: space-between">
                      <span>{{ env.name }}</span>
                      <span style="color: #8492a6; font-size: 12px">{{ env.url }}</span>
                    </div>
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="自定义API" v-if="environmentConfig.customUrl">
                <el-input
                  v-model="environmentConfig.apiUrl"
                  placeholder="https://your-custom-api.com"
                />
              </el-form-item>

              <el-form-item>
                <el-checkbox v-model="environmentConfig.customUrl">
                  使用自定义API地址
                </el-checkbox>
              </el-form-item>
            </el-form>

            <div v-if="selectedEnvironmentInfo" class="env-preview">
              <el-alert
                :title="`将使用API地址: ${finalApiUrl}`"
                type="info"
                :closable="false"
                show-icon
              />
            </div>
          </div>
        </div>

        <!-- 步骤3: 构建设置 -->
        <div v-show="activeStep === 2" class="step-panel">
          <el-form :model="buildOptions" label-width="120px">
            <el-form-item label="Node.js版本" required>
              <el-select
                v-model="buildOptions.nodeVersion"
                placeholder="选择Node版本"
                @focus="loadNodeVersions"
                :loading="loadingNodeVersions"
                style="width: 100%"
              >
                <el-option
                  v-for="version in nodeVersions"
                  :key="version.key"
                  :label="`${version.version} - ${version.description}`"
                  :value="version.key"
                >
                  <div style="display: flex; justify-content: space-between">
                    <span>Node {{ version.version }}</span>
                    <span style="color: #8492a6; font-size: 12px">{{
                      version.description
                    }}</span>
                  </div>
                </el-option>
              </el-select>
              <div v-if="recommendedNodeVersion" class="node-recommendation">
                <el-alert
                  :title="`推荐版本: ${recommendedNodeVersion.versionInfo?.version}`"
                  type="info"
                  :description="recommendedNodeVersion.reason"
                  show-icon
                  :closable="false"
                />
                <el-button
                  size="small"
                  type="primary"
                  @click="buildOptions.nodeVersion = recommendedNodeVersion.recommended"
                  style="margin-top: 10px"
                >
                  使用推荐版本
                </el-button>
              </div>
            </el-form-item>

            <el-form-item label="构建模式">
              <el-radio-group v-model="buildOptions.mode">
                <el-radio label="production">生产环境</el-radio>
                <el-radio label="development">开发环境</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="构建策略">
              <el-select
                v-model="buildOptions.strategy"
                placeholder="选择构建策略"
                @focus="loadBuildStrategies"
                :loading="loadingStrategies"
                style="width: 100%"
              >
                <el-option
                  v-for="strategy in buildStrategies"
                  :key="strategy.key"
                  :label="`${strategy.name} - ${strategy.description}`"
                  :value="strategy.key"
                  :disabled="!strategy.available"
                >
                  <div
                    style="
                      display: flex;
                      justify-content: space-between;
                      align-items: center;
                    "
                  >
                    <span>{{ strategy.name }}</span>
                    <div>
                      <el-tag v-if="strategy.recommended" type="success" size="small"
                        >推荐</el-tag
                      >
                      <el-tag v-if="!strategy.available" type="danger" size="small"
                        >不可用</el-tag
                      >
                    </div>
                  </div>
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="构建平台" v-if="buildPlatforms.length > 0">
              <el-select
                v-model="buildOptions.platform"
                placeholder="选择构建平台"
                @focus="loadBuildPlatforms"
                :loading="loadingPlatforms"
                style="width: 100%"
              >
                <el-option
                  v-for="platform in buildPlatforms"
                  :key="platform.key"
                  :label="`${platform.name} - ${platform.description}`"
                  :value="platform.key"
                  :disabled="!platform.available"
                >
                  <div
                    style="
                      display: flex;
                      justify-content: space-between;
                      align-items: center;
                    "
                  >
                    <span>{{ platform.name }}</span>
                    <div>
                      <el-tag v-if="platform.key === 'h5'" type="success" size="small"
                        >默认</el-tag
                      >
                      <el-tag v-if="!platform.available" type="danger" size="small"
                        >不可用</el-tag
                      >
                    </div>
                  </div>
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="构建工具">
              <el-select v-model="buildOptions.tool" placeholder="自动检测">
                <el-option label="自动检测" value="auto" />
                <el-option label="Webpack" value="webpack" />
                <el-option label="Vite" value="vite" />
                <el-option label="Rollup" value="rollup" />
              </el-select>
            </el-form-item>
          </el-form>
        </div>

        <!-- 步骤4: 构建结果 -->
        <div v-show="activeStep === 3" class="step-panel">
          <div v-if="building" class="building-state">
            <el-progress :percentage="buildProgress" :status="buildStatus" stroke-width="10" />
            <p class="build-message">{{ buildMessage }}</p>

            <!-- 实时日志 -->
            <div v-if="currentProjectId" class="build-logs-section">
              <BuildLogs :project-id="currentProjectId" />
            </div>
          </div>

          <div v-else-if="buildResult" class="build-success">
            <el-result icon="success" title="构建完成！">
              <template #sub-title>
                <p>项目构建成功，构建产物已准备完毕</p>
                <div v-if="buildResult.downloadInfo" class="build-info">
                  <el-descriptions :column="2" size="small">
                    <el-descriptions-item label="文件名">
                      {{ buildResult.downloadInfo.fileName }}
                    </el-descriptions-item>
                    <el-descriptions-item label="平台">
                      {{ buildResult.downloadInfo.platform }}
                    </el-descriptions-item>
                    <el-descriptions-item label="索引">
                      #{{ buildResult.downloadInfo.index }}
                    </el-descriptions-item>
                    <el-descriptions-item label="文件大小">
                      {{ formatFileSize(buildResult.downloadInfo.fileSize) }}
                    </el-descriptions-item>
                    <el-descriptions-item label="构建时间" :span="2">
                      {{ formatDate(buildResult.downloadInfo.createdAt) }}
                    </el-descriptions-item>
                  </el-descriptions>
                </div>
              </template>
              <template #extra>
                <el-button type="primary" size="large" @click="downloadResult">
                  <el-icon><Download /></el-icon>
                  下载构建产物
                </el-button>
                <el-button
                  v-if="isMiniprogramPlatform"
                  type="success"
                  size="large"
                  @click="openMiniprogramUpload"
                >
                  <el-icon><Upload /></el-icon>
                  上传到微信平台
                </el-button>
                <el-button @click="resetForm">
                  <el-icon><RefreshLeft /></el-icon>
                  重新构建
                </el-button>
                <el-button @click="viewPackageIndexes">
                  <el-icon><DataAnalysis /></el-icon>
                  查看索引状态
                </el-button>
              </template>
            </el-result>
          </div>
        </div>
      </div>

      <!-- 小程序上传组件 -->
      <MiniprogramUpload
        ref="miniprogramUploadRef"
        :project-id="currentProjectId"
        :platform="buildOptions.platform"
        @upload-success="handleUploadSuccess"
        @upload-error="handleUploadError"
      />

      <!-- 操作按钮 -->
      <div class="step-actions">
        <el-button
          v-if="activeStep > 0"
          @click="prevStep"
          :disabled="building || nextStepLoading"
        >
          上一步
        </el-button>
        <el-button
          v-if="activeStep < 3"
          type="primary"
          @click="nextStep"
          :disabled="!canProceed"
          :loading="nextStepLoading"
        >
          {{ nextStepLoading ? "处理中..." : "下一步" }}
        </el-button>
        <el-button
          v-if="activeStep === 3 && !buildResult"
          type="success"
          @click="startBuild"
          :loading="building"
        >
          {{ building ? "构建中..." : "开始构建" }}
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { ref, computed } from "vue";
import axios from "axios";
import BuildLogs from "../components/BuildLogs.vue";
import MiniprogramUpload from "../components/MiniprogramUpload.vue";
import { formatFileSize, formatDate } from "../utils/format.js";

export default {
  name: "BuildPage",
  components: {
    BuildLogs,
    MiniprogramUpload,
  },
  setup() {
    // 响应式数据
    const activeStep = ref(0);

    // 仓库信息
    const repoForm = ref({
      url: "",
      ref: "",
      refType: "branch",
      branch: "",
      tag: "",
    });
    const branches = ref([]);
    const branchTotal = ref(0);
    const tags = ref([]);
    const tagTotal = ref(0);
    const projectInfo = ref(null);

    // 环境域名配置
    const environmentConfig = ref({
      type: "test",
      environment: "test01",
      customUrl: false,
      apiUrl: "",
    });
    const environments = ref({ test: [], dev: [] });
    const loadingEnvironments = ref(false);

    // 构建选项
    const buildOptions = ref({
      mode: "production",
      tool: "auto",
      nodeVersion: "node14",
      strategy: "auto",
      platform: "h5",
    });

    // Node版本相关
    const nodeVersions = ref([]);
    const recommendedNodeVersion = ref(null);
    const loadingNodeVersions = ref(false);

    // 构建策略相关
    const buildStrategies = ref([]);
    const loadingStrategies = ref(false);

    // 构建平台相关
    const buildPlatforms = ref([]);
    const loadingPlatforms = ref(false);

    // 构建状态
    const building = ref(false);
    const buildProgress = ref(0);
    const buildStatus = ref("");
    const buildMessage = ref("");
    const buildResult = ref(null);
    const currentProjectId = ref("");

    // 按钮 loading 状态
    const nextStepLoading = ref(false);
    const validatingRepo = ref(false);

    // 小程序上传
    const miniprogramUploadRef = ref(null);

    // 计算属性
    const currentStep = computed(() => activeStep.value + 1);

    const isMiniprogramPlatform = computed(() => {
      const platform = buildOptions.value.platform;
      return (
        platform === "mp-weixin" ||
        platform === "mp-alipay" ||
        platform === "weixin-huanzhe" ||
        platform === "alipay-huanzhe"
      );
    });

    const currentEnvironments = computed(() => {
      return environments.value[environmentConfig.value.type] || [];
    });

    const selectedEnvironmentInfo = computed(() => {
      if (!environmentConfig.value.environment) return null;
      return currentEnvironments.value.find(
        (env) => env.key === environmentConfig.value.environment
      );
    });

    const finalApiUrl = computed(() => {
      if (environmentConfig.value.customUrl && environmentConfig.value.apiUrl) {
        return environmentConfig.value.apiUrl;
      }
      return (
        selectedEnvironmentInfo.value?.url ||
        `https://${environmentConfig.value.environment}.xnzn.net`
      );
    });

    const canProceed = computed(() => {
      switch (activeStep.value) {
        case 0:
          return repoForm.value.url && projectInfo.value;
        case 1:
          return true;
        case 2:
          return buildOptions.value.mode;
        default:
          return false;
      }
    });

    // 方法
    const validateRepo = async () => {
      if (!repoForm.value.url) return;

      validatingRepo.value = true;
      try {
        const response = await axios.post("/api/git/validate", {
          repoUrl: repoForm.value.url,
        });

        if (response.data.success) {
          projectInfo.value = response.data.projectInfo;
          await loadBranchesAndTags();
        }
      } catch (error) {
        console.error("仓库验证失败:", error);
        projectInfo.value = null;
      } finally {
        validatingRepo.value = false;
      }
    };

    const loadBranches = async (search = "") => {
      if (!repoForm.value.url) return;

      try {
        const response = await axios.post("/api/git/branches", {
          repoUrl: repoForm.value.url,
          search: search,
        });

        if (response.data.success) {
          branches.value = response.data.branches;
          branchTotal.value = response.data.total;
        }
      } catch (error) {
        console.error("获取分支失败:", error);
      }
    };

    const loadTags = async (search = "") => {
      if (!repoForm.value.url) return;

      try {
        const response = await axios.post("/api/git/tags", {
          repoUrl: repoForm.value.url,
          search: search,
        });

        if (response.data.success) {
          tags.value = response.data.tags;
          tagTotal.value = response.data.total;
        }
      } catch (error) {
        console.error("获取标签失败:", error);
      }
    };

    const loadBranchesAndTags = async () => {
      if (!repoForm.value.url) return;

      await Promise.all([loadBranches(), loadTags()]);

      if (!repoForm.value.ref) {
        if (branches.value.length > 0) {
          repoForm.value.ref = `branch:${branches.value[0].name}`;
        } else if (tags.value.length > 0) {
          repoForm.value.ref = `tag:${tags.value[0].name}`;
        }
        parseRefValue();
      }
    };

    const onRefChange = () => {
      parseRefValue();
    };

    const parseRefValue = () => {
      if (!repoForm.value.ref) return;

      const [type, ...nameParts] = repoForm.value.ref.split(":");
      const name = nameParts.join(":");

      repoForm.value.refType = type;
      if (type === "branch") {
        repoForm.value.branch = name;
        repoForm.value.tag = "";
      } else if (type === "tag") {
        repoForm.value.tag = name;
        repoForm.value.branch = "";
      }
    };

    const loadEnvironments = async () => {
      if (loadingEnvironments.value || environments.value.test.length > 0) return;

      loadingEnvironments.value = true;
      try {
        const response = await axios.get("/api/build/environments");
        if (response.data.success) {
          environments.value = response.data.environments;
        }
      } catch (error) {
        console.error("加载环境配置失败:", error);
      } finally {
        loadingEnvironments.value = false;
      }
    };

    const onEnvironmentTypeChange = () => {
      const type = environmentConfig.value.type;
      environmentConfig.value.environment = type === "test" ? "test01" : "dev01";
    };

    const viewPackageIndexes = async () => {
      try {
        const response = await axios.get("/api/build/package-indexes");
        if (response.data.success) {
          const indexInfo =
            Object.entries(response.data.indexes)
              .map(([platform, index]) => `${platform}: ${index}`)
              .join("\n") || "暂无构建记录";

          alert(`当前包索引状态:\n${indexInfo}`);
        }
      } catch (error) {
        console.error("获取包索引失败:", error);
      }
    };

    const nextStep = async () => {
      if (activeStep.value < 3) {
        nextStepLoading.value = true;

        try {
          if (activeStep.value === 1) {
            const clonePayload = {
              repoUrl: repoForm.value.url,
              refType: repoForm.value.refType,
            };

            if (repoForm.value.refType === "tag") {
              clonePayload.tag = repoForm.value.tag;
            } else {
              clonePayload.branch = repoForm.value.branch;
            }

            const cloneResponse = await axios.post("/api/git/clone", clonePayload);

            if (!cloneResponse.data.success) {
              throw new Error("仓库克隆失败");
            }

            currentProjectId.value = cloneResponse.data.projectId;
          }

          activeStep.value++;

          if (activeStep.value === 2 && currentProjectId.value) {
            await Promise.all([detectRecommendedNodeVersion(), loadBuildPlatforms()]);
          }
        } catch (error) {
          console.error("步骤执行失败:", error);
        } finally {
          nextStepLoading.value = false;
        }
      }
    };

    const prevStep = () => {
      if (activeStep.value > 0) {
        activeStep.value--;
      }
    };

    const startBuild = async () => {
      building.value = true;
      buildProgress.value = 0;
      buildMessage.value = "正在构建项目...";

      try {
        buildProgress.value = 50;

        const buildResponse = await axios.post("/api/build/start", {
          projectId: currentProjectId.value,
          envVars: {},
          buildOptions: {
            ...buildOptions.value,
            environment: environmentConfig.value.environment,
            apiUrl: environmentConfig.value.customUrl
              ? environmentConfig.value.apiUrl
              : undefined,
          },
        });

        buildProgress.value = 100;
        buildStatus.value = "success";
        buildMessage.value = "构建完成！";
        buildResult.value = buildResponse.data;
      } catch (error) {
        console.error("构建失败:", error);
        buildStatus.value = "exception";
        buildMessage.value = `构建失败: ${error.response?.data?.message || error.message}`;
      } finally {
        building.value = false;
      }
    };

    const downloadResult = () => {
      if (buildResult.value?.downloadInfo?.downloadUrl) {
        window.open(buildResult.value.downloadInfo.downloadUrl, "_blank");
      }
    };

    const resetForm = () => {
      activeStep.value = 0;
      repoForm.value = {
        url: "",
        ref: "",
        refType: "branch",
        branch: "",
        tag: "",
      };
      buildOptions.value = {
        mode: "production",
        tool: "auto",
        nodeVersion: "node14",
        strategy: "auto",
        platform: "h5",
      };
      projectInfo.value = null;
      buildResult.value = null;
      currentProjectId.value = "";
      branches.value = [];
      branchTotal.value = 0;
      tags.value = [];
      tagTotal.value = 0;
    };

    const loadNodeVersions = async () => {
      if (nodeVersions.value.length > 0) return;

      loadingNodeVersions.value = true;
      try {
        const response = await axios.get("/api/build/node-versions");
        if (response.data.success) {
          nodeVersions.value = response.data.versions;
        }
      } catch (error) {
        console.error("加载Node版本失败:", error);
      } finally {
        loadingNodeVersions.value = false;
      }
    };

    const loadBuildStrategies = async () => {
      if (buildStrategies.value.length > 0) return;

      loadingStrategies.value = true;
      try {
        const response = await axios.get("/api/build/strategies");
        if (response.data.success) {
          buildStrategies.value = response.data.strategies;

          if (response.data.dockerAvailable) {
            buildOptions.value.strategy = "docker";
          }
        }
      } catch (error) {
        console.error("加载构建策略失败:", error);
      } finally {
        loadingStrategies.value = false;
      }
    };

    const detectRecommendedNodeVersion = async () => {
      if (!currentProjectId.value) return;

      try {
        const response = await axios.post("/api/build/detect-node-version", {
          projectId: currentProjectId.value,
        });

        if (response.data.success) {
          recommendedNodeVersion.value = response.data;
        }
      } catch (error) {
        console.error("检测推荐Node版本失败:", error);
      }
    };

    const loadBuildPlatforms = async () => {
      if (!currentProjectId.value || buildPlatforms.value.length > 0) return;

      loadingPlatforms.value = true;
      try {
        const response = await axios.get(`/api/build/platforms/${currentProjectId.value}`);
        if (response.data.success) {
          buildPlatforms.value = response.data.platforms;

          if (response.data.isUniApp && buildPlatforms.value.length > 0) {
            const h5Platform = buildPlatforms.value.find((p) => p.key === "h5");
            if (h5Platform) {
              buildOptions.value.platform = "h5";
            }
          }
        }
      } catch (error) {
        console.error("加载构建平台失败:", error);
      } finally {
        loadingPlatforms.value = false;
      }
    };

    const openMiniprogramUpload = () => {
      if (miniprogramUploadRef.value) {
        miniprogramUploadRef.value.open();
      }
    };

    const handleUploadSuccess = (data) => {
      console.log("小程序上传成功:", data);
      alert("小程序上传成功!");
    };

    const handleUploadError = (error) => {
      console.error("小程序上传失败:", error);
      alert("小程序上传失败: " + (error.message || "未知错误"));
    };

    // 初始化
    loadNodeVersions();
    loadBuildStrategies();
    loadEnvironments();

    return {
      activeStep,
      repoForm,
      branches,
      branchTotal,
      tags,
      tagTotal,
      projectInfo,
      environmentConfig,
      environments,
      loadingEnvironments,
      buildOptions,
      building,
      buildProgress,
      buildStatus,
      buildMessage,
      buildResult,
      nodeVersions,
      recommendedNodeVersion,
      loadingNodeVersions,
      buildStrategies,
      loadingStrategies,
      buildPlatforms,
      loadingPlatforms,
      currentProjectId,
      miniprogramUploadRef,
      nextStepLoading,
      validatingRepo,
      currentStep,
      isMiniprogramPlatform,
      currentEnvironments,
      selectedEnvironmentInfo,
      finalApiUrl,
      canProceed,
      validateRepo,
      loadBranches,
      loadTags,
      loadBranchesAndTags,
      onRefChange,
      loadEnvironments,
      onEnvironmentTypeChange,
      viewPackageIndexes,
      nextStep,
      prevStep,
      startBuild,
      downloadResult,
      resetForm,
      formatFileSize,
      formatDate,
      loadNodeVersions,
      loadBuildStrategies,
      loadBuildPlatforms,
      detectRecommendedNodeVersion,
      openMiniprogramUpload,
      handleUploadSuccess,
      handleUploadError,
    };
  },
};
</script>

<style scoped>
.build-page {
  padding: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.build-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: none;
  border-radius: 16px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.steps {
  margin: 30px 0;
}

.step-content {
  min-height: 300px;
  padding: 20px 0;
}

.step-panel {
  animation: fadeInUp 0.5s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.repo-info {
  margin-top: 20px;
}

.info-content p {
  margin: 5px 0;
}

.env-section {
  border: 1px solid #e1e8ed;
  border-radius: 8px;
  padding: 20px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h3 {
  margin: 0;
  color: #2c3e50;
}

.building-state {
  text-align: center;
  padding: 40px 0;
}

.build-message {
  margin-top: 20px;
  font-size: 16px;
  color: #606266;
}

.build-logs-section {
  margin-top: 24px;
  height: 400px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  overflow: hidden;
}

.step-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #e1e8ed;
}

.node-recommendation {
  margin-top: 15px;
}

.branch-info {
  margin-top: 8px;
  font-size: 12px;
  color: #666;
}

.env-preview {
  margin-top: 15px;
}

.build-info {
  margin-top: 20px;
  padding: 16px;
  background: #f5f7fa;
  border-radius: 8px;
}
</style>
